<!-- 添加 弹框 -->
<template>
  <el-dialog
    width="30%"
    :title="frameTitle"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :visible.sync="isOpenFrame"
    @open="openFrameCB()"
    @close="closeFrameCB()"
  >
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <el-form-item label="门店" prop="sId">
        <el-select v-model="form.sId" placeholder="请选择" style="width: 100%">
          <el-option
            v-for="item in storeList"
            :key="item.sId"
            :label="item.sName"
            :value="item.sId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="房间号" prop="rNum">
        <el-input v-model="form.rNum"></el-input>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-select v-model="form.type" placeholder="请选择" style="width: 100%">
          <el-option
            v-for="item in roomType"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="type">
        <el-select
          v-model="form.status"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            v-for="item in roomStatus"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="价格" prop="rPrice">
        <el-input v-model="form.rPrice"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <section>
        <el-button @click="closeFrame()">取消返回</el-button>
        <el-button type="primary" @click="handleConfirm()">
          {{ comfirmButtonName }}
        </el-button>
      </section>
    </template>
  </el-dialog>
</template>

<script>
import api from '../../../js/api/api.js';

const big2small = (big, small) => {
  if (!!big) {
    Object.keys(small).forEach((key) => {
      if (!!big[key]) {
        const target = big[key];
        if (!!target || target === 0) {
          small[key] = target;
        } else {
          small[key] = small[key];
        }
      }
    });
  }
};

export default {
  name: 'editFrame',

  props: {
    dialogVisible: {
      default: false,
    },

    // 是否编辑？ 不是编辑就是新增。 这个设计不合理，但是项目目前是简陋的，允许这样处理。
    isEdit: {
      default: false,
    },
    //业务主键id
    id: {
      default: '',
    },
  },

  data() {
    return {
      form: {
        rId: '',
        rNum: '',
        status: '空闲',
        type: '单人间',
        sId: '',
        rPrice: '',
      },
      roomType: ['单人间', '豪华单人间', '双人间', '豪华双人间'],
      roomStatus: ['空闲', '预定', '住满'],
      storeInfo: {},
      storeList: [],
      rules: {
        rNum: [{ required: true, message: '请输入房间号', trigger: 'blur' }],
      },
    };
  },

  computed: {
    isOpenFrame: {
      get() {
        return this.dialogVisible;
      },

      set(value) {
        if (!value) {
          this.$emit('update:dialogVisible', false);
        }
      },
    },

    // 弹框标题
    frameTitle() {
      return this.isEdit ? '编辑' : '新增';
    },

    comfirmButtonName() {
      return this.isEdit ? '确认修改' : '确认新增';
    },
  },

  methods: {
    closeFrame() {
      this.$emit('update:dialogVisible', false);
    },

    /** 检验表单内容是否都通过了校验？ 本方法借助于elementUI的el-form组件的校验方法 */
    isFormAllPassValidate() {
      // 默认全部的内容都填写完毕
      let res = true;
      this.$refs['form'].validate((validateRes, validateItemObj) => {
        if (!validateRes) {
          res = false;
          return false;
        }
      });
      return res;
    },

    // 添加门店
    async addNew() {
      const postData = {
        ...this.form,
      };
      await api.addRoom(postData).then((res) => {
        if (res.status === 200 && res.data.status) {
          this.$message.success(' 添加成功！ ');
        }
      });
    },

    // 修改门店信息
    async updateStoreInfo() {
      const postData = {
        ...this.form,

        // 修改门店时，不需要传递用户id以便识别。
        // id: localStorage.getItem('userId'),
      };

      await api.updateRoom(postData).then((res) => {
        if (res.status === 200 && res.data.status) {
          this.$message.success(' 修改成功！ ');
        }
      });
    },

    /** 处理确认按钮功能 */
    async handleConfirm() {
      if (this.isFormAllPassValidate()) {
        if (this.isEdit === true) {
          await this.updateStoreInfo();
        } else {
          await this.addNew();
        }

        // 关闭弹框
        this.closeFrame();
        // 立刻更新父组件的列表数据
        this.$emit('updateTableList');
      } else {
        this.$message.error(' 尚未填写完全部的必填项，请检查！ ');
      }
    },

    // 根据门店id获取门店数据
    async getById() {
      console.log('xxxx');
      if (this.id) {
        await api.getRoomByRid({ rId: this.id }).then((res) => {
          if (res.status === 200 && res.data.status) {
            console.log(' res ', res.data);
            // 门店数据赋值，
            this.form = res.data.result;
          }
        });
      }
    },

    // 打开弹窗的回调函数
    async openFrameCB() {
      await api.getAllStore().then((res) => {
        if (res.data.status) {
          console.log(' res ', res.data);
          // 门店数据赋值，
          this.storeList = res.data.result;
        }
      });

      if (this.id) {
        await this.getById();
      }
    },

    // 关闭窗口的回调函数，清空重设全部数据
    closeFrameCB() {
      this.$refs['form'].resetFields();
    },
  },
};
</script>
